<template>
	<view class="template-order">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed :isBack="false" :bottomShadow="false" backgroundColor="#FFFFFF">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<!-- 返回按钮 -->
				<view class="custom-nav__back" @tap.stop="goBack">
					<view class="tn-icon-left"></view>
				</view>
				<!-- 搜索框 -->
				<view class="custom-nav__search tn-flex tn-flex-col-center tn-flex-row-center">
					<view
						class="custom-nav__search__box tn-flex tn-flex-col-center tn-flex-row-left tn-color-gray--dark">
						<view class="custom-nav__search__icon tn-icon-search"></view>
						<view class="custom-nav__search__text">搜索</view>
					</view>
				</view>
			</view>
		</tn-nav-bar>

		<view class="order--wrap" :style="{top: vuex_custom_bar_height + 'px'}">
			
			<view class="order__swiper__item" v-if="withdrawList.length > 0" :style="{top: `${swiperTop}px`, height: `${swiperHeight}px`}">
			<!-- 标签内容 -->
			<scroll-view :style="{height: `${swiperHeight}px`}" scroll-y>
				<view v-for="(item, index) in withdrawList" :key="index" class="order__item">

					<view
						class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view class="">
							<view class="order__item__content__title">
								提现成功
							</view>
							<view style="height: 4px"></view>
							<view class="order__item__content__time">
								{{ tool.formatDateTime(item.updated_at) }}
							</view>
						</view>

						<view class="order__item__content__info__price--subtract">
							<text class="order__item__content__info__price--asc">-</text>
							<text
								class="order__item__content__info__price__value--integer">{{ item.amount }}</text>
							<!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
							<text class="order__item__content__info__price--unit">元</text>
						</view>
					</view>

				</view>
				<view class="tn-padding-bottom"></view>
			</scroll-view>
			</view>
			
			<tn-empty v-else mode="data" class="fullscreen-empty"></tn-empty>
		</view>

	</view>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'

	import {
		getWithdrawHistory
	} from '@/apis/cash';

	import tool from '@/utils/common.js';

	export default {
		name: 'cashoutHistory',
		mixins: [templatePageMixin],
		data() {
			return {
				withdrawList: [],
				swiperTop: 0,
				swiperHeight: 0
			}
		},
		onShow() {
			this.getWithdrawHistory();
		},		
		onReady() {
			this.$nextTick(() => {
				this.updateSwiperInfo()
			})
		},
		methods: {
			getWithdrawHistory() {
				getWithdrawHistory().then(res => {						
					this.withdrawList = res.history;
					this.$nextTick(() => this.updateSwiperInfo()); 
				})
			},
			// 计算可滑动区域的高度信息
			updateSwiperInfo() {
				// 获取可滑动菜单的信息
				this._tGetRect('.order__swiper__item').then(res => {
					if (!res) {
						setTimeout(() => {
							this.updateSwiperInfo()
						}, 10)
						return
					}
					const systemInfo = uni.getSystemInfoSync()
					this.swiperTop = res.bottom - this.vuex_custom_bar_height
					this.swiperHeight = systemInfo.safeArea.height - res.bottom + systemInfo.statusBarHeight
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-order {
		background-color: #F7F7F7CC;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			// margin: auto 5rpx;
			font-size: 40rpx;
			flex-basis: 5%;
			padding: 20rpx 40rpx 20rpx 30rpx;
		}

		&__search {
			flex-basis: 55%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 60%;
				padding: 28rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx;
				font-size: 24rpx;
				background-color: #FFFFFF;
				border: 1rpx solid #F8F7F8;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				color: #AAAAAA;
			}
		}
	}
	.order--wrap {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0; /* 新增 */
	  overflow: hidden;
	}
	
	.fullscreen-empty {
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}

	/* 自定义导航栏内容 end */

	.order {
		&--wrap {
			position: fixed;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
		}

		/* 导航栏 start */
		&__tabs {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background-color: inherit;
		}

		/* 导航栏 end */

		/* swiper start */
		&__swiper {
			position: absolute;
			left: 0;
			right: 0;
			width: 100%;
			background-color: inherit;
			// padding: 0 16rpx;
		}

		/* swiper end */

		/* 订单内容 start */
		&__item {
			margin: 20rpx;
			padding: 26rpx 26rpx;
			background-color: #FFFFFF;
			border-radius: 18rpx;

			&:first-child {
				margin-top: 40rpx;
			}

			&:last-child {
				margin-bottom: 0;
			}

			/* 头部 start */
			&__head {

				&__title {
					font-weight: bold;
					line-height: normal;

					&--right-icon {
						font-size: 24rpx;
						margin-left: 8rpx;
					}
				}

				&__status {
					font-size: 22rpx;
					color: #AAAAAA;
				}
			}

			/* 头部 end */

			/* 内容 start */
			&__content {

				margin-top: 10rpx;

				&__image {
					margin-right: 20rpx;

					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 10rpx;
					}
				}

				&__title {
					padding-right: 40rpx;
					display: -webkit-box;
					overflow: hidden;
					white-space: normal !important;
					text-overflow: ellipsis;
					word-wrap: break-word;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				&__time {
					font-size: 18rpx;
					color: #9d9d9d;
				}

				&__info {

					&__price {
						color: #42c800;

						&--unit {
							font-size: 20rpx;
						}

						&__value--integer,
						&__value--decimal {
							font-weight: bold;
						}

						&__value--decimal {
							font-size: 20rpx;
						}

						&.--add {

							.order__item__content__info__price--asc,
							.order__item__content__info__price__value--integer,
							.order__item__content__info__price__value--decimal,
							.order__item__content__info__price--unit {
								color: #42c800;
							}
						}

						&.--subtract {

							.order__item__content__info__price--asc,
							.order__item__content__info__price__value--integer,
							.order__item__content__info__price__value--decimal,
							.order__item__content__info__price--unit {
								color: #ff0000; // 红色
							}
						}
					}
				}
			}

			/* 内容 end */

		}

		/* 订单内容 end */
	}
</style>